<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>墨芽豆直播间</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../libs/thirdpart/elementui/index.css">
    <link rel="stylesheet" href="./../css/style.css">
    <link rel="stylesheet" href="./../css/api.css">
    <script src="./../js/base.js"></script>
    <script src="../libs/thirdpart/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../libs/thirdpart/elementui/index.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #app_box {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .title {
            margin: 10px 0;
            text-align: center;
        }

        .text-right {
            text-align: right;
        }

        .promption {
            color: #A0A0A0
        }

        .im-log-box {
            width: 100%;
            height: 100%;
            border: 1px solid #999;
            margin: 0px;
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .im-log-box li {
            margin: 2px 5px;
            font-size: 14px;
            color: #666;
        }

        #video_wrap {
            height: 130px;
            display: flex;
        }

        #video_wrap>div {
            width: 200px;
            height: 100%;
            /* background-color: blue; */
        }

        #paint_box {
            position: relative;
            width: 998px;
            height: 560px;
            border: 1px solid #888;
            overflow: hidden;
            box-sizing: content-box;
            margin: 0 auto;
        }

        .el-header,
        .el-footer {
            padding: 0 !important;
        }

        .el-main {
            padding: 0 !important;
            overflow: hidden !important;
            height: 100%;
        }

        .el-container {
            height: 100%;
            overflow: hidden;
        }

        .el-tabs__header {
            margin: 0;
        }

        .el-icon-arrow-left,
        .el-icon-arrow-right {
            font-size: 20px;
        }

        .version-info {
            font-size: 14px;
            color: #606266;
        }

        .left {
            padding: 20px 30px;
            width: 360px;
        }

        .news {
            height: 300px;
        }

        .news .el-container {
            overflow: visible;
        }

        .center {
            width: 1000px;
            position: relative;
        }

        .center .pages {
            position: absolute;
            right: 20px;
            top: 528px;
        }

        .center_box {
            overflow: hidden;
            margin-bottom: 20px;
        }

        .closeWin {
            position: absolute;
            right: 50px;
            top: 5px;
            z-index: 999;
            cursor: pointer;
        }

        .closeWin img {
            width: 30px;
        }


        .gongju {
            margin-bottom: 20px;
        }

        .gongju img {
            width: 60px;
            cursor: pointer;
        }

        #videoTeacher {
            width: 50px;
            height: 50px;
            background-color: #fff;
            z-index: 999;
            bottom: 0;
            left: 0z;
        }

        .videoBox {
            position: absolute;
            z-index: 999;
        }

        .videoBox span {
            position: absolute;
        }

        .videoBox img {
            width: 30px;
            height: 25px;
        }

        .videoBg {
            left: 10px;
            bottom: 10px;
        }

        .makeBg {
            right: 10px;
            bottom: 10px;
        }

        .main {
            width: 1400px;
            padding-top: 30px;
            margin: 0 auto;
        }

        .baiban {
            width: 1000px;
            float: left;
        }

        .tuya {
            float: right;
            padding-top: 0px;
            margin-right: 30px;
        }

        .el-tabs__nav-scroll {
            display: none;
        }

        .classTip {
            height: 100px;
            overflow-y: auto;
            border: 1px solid #DCDFE6;
            padding: 15px;
            line-height: 23px;
            font-size: 14px;
            position: absolute;
            top: 660px;
            width: 1000px;
        }

        .doudou {
            position: absolute;
            right: 0;
            bottom: 36px;
            z-index: 999;
            text-align: center;
        }

        .doudou img {
            cursor: pointer;
        }

        .doudou p {
            margin-top: -10px;
        }

        .dasljkfhsd {
            position: relative;
        }

        .douzi {
            display: flex;
        }

        .douzi img {
            width: 60px;
        }
    </style>


</head>

<body>

    <div class="tip_alert" style="display: none;">
        <div class="tip_alert_box"></div>
    </div>
    <div id="app_box" class="container-fluid">
        <el-container style="display: none;" v-show="isShow" class="main">
            <!--中间部分  -->
            <el-main class="baiban">
                <el-container>
                    <!--中间  白板区 -->
                    <div class="center">
                        <el-main class="dasljkfhsd">
                            <el-container>
                                <div class="center_box">
                                    <el-main>
                                        <div id="paint_box" style="background-color: rgb(240, 240, 240);"></div>
                                    </el-main>
                                </div>
                            </el-container>
                        </el-main>
                        <div class="pages">
                            {{boardData.current}}/{{boardData.total}}
                        </div>
                    </div>
                </el-container>
            </el-main>

            <!--右边栏  -->
            <el-aside width="340px" class="tuya">
                <!--中间区  视频区 -->
                <div class="headerBox">
                    <div style="height:270px;">
                        <div id="video_wrap">
                            <div class="stuBox videoMake" id="stuBox" :class="{mask:videoStuFlag}">

                            </div>
                            <div class="teaBox videoMake" id="teaBox">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="gongjubox" :class="{point:!baibancaozuo}">
                    <div class="gongju">
                        <img :src="tool[0]" alt="笔" title="笔" :data-index="0"
                            :data-type="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_PEN" @click="onSetToolType($event)">
                    </div>
                    <div class="gongju">
                        <img :src="tool[5]" alt="" title="橡皮" :data-index="5"
                            :data-type="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_ERASER" @click="onSetToolType($event)">
                    </div>
                </div>

                <div class="douzi">
                    <div><img src="../image//douzi.png" alt=""></div>
                    <div><img src="../image//douzi.png" alt=""></div>
                    <div><img src="../image//douzi.png" alt=""></div>
                    <div><img src="../image//douzi.png" alt=""></div>
                    <div><img src="../image//douzi.png" alt=""></div>
                </div>
            </el-aside>
        </el-container>
    </div>

    <script src="../js/jquery-1.7.2.min.js"></script>

    <link href="https://resources-tiw.qcloudtrtc.com/thirdpart/videojs/video-js.min.css" rel="stylesheet">
    <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/videojs/video.min.js"></script>

    <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/axios/axios.min.js"></script>

    <!-- WebRTC SDK -->
    <script src="./../libs/trtc.js"></script>
    <!-- WebIM SDK -->
    <script src="https://resources-tiw.qcloudtrtc.com/webim/webim.min.js"></script>

    <!-- COS SDK -->
    <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/cos/5.1.0/cos.min.js"></script>

    <!-- 白板SDK -->
    <script src="https://resources-tiw.qcloudtrtc.com/board/2.4.4/TEduBoard.min.js"></script>
    <!-- <script src="libs/TEduBoard.min.js"></script> -->

    <!-- TIC SDK 可根据开源代码自行编译TIC-->
    <script src="https://resources-tiw.qcloudtrtc.com/tic/2.4.3/TIC.min.js"></script>
    <!-- <script src="../libs/tim-js.js"></script> -->


    <script src="../libs/thirdpart/purl.js"></script>
    <script src="../libs/thirdpart/vconsole.min.js"></script>
    <script src="../js/account_dev.js"></script>
    <!-- <script src="../js/main.js"></script> -->
    <script src="../js/stu_live.js"></script>
    <script>
        if (location.href.indexOf('dev') > -1) {
            var vConsole = new VConsole();
            console.log(vConsole)
        }
    </script>
</body>

</html>